<template>
  <div class="site-banner" @mouseleave="handleMouseLeave">
    <ul class="site-box">
      <li v-for="(ele, i) in brands" :key="i" @mouseenter="handleMouseEnter" :name="i + 1">
        <img :src="ele.LOGO" />
      </li>
    </ul>
    <div class="site-content" v-if="showSiteContent">
      <div class="small-card" v-for="(ele, i) in productsByBrand" :key="i" @click="handleClickSmallCard(ele)">
        <img :src="ele.imgUrl" alt="" />
        <p>{{ ele.name }}</p>
        <i class="el-icon-circle-plus-outline addButton" @click.stop="handleAddToCompare(ele)"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { getBrand, getProductsByBrandID, getProducts } from "@/api/getProducts";
export default {
  data() {
    return {
      brands: [],
      productsByBrand: [],
      showSiteContent: false,
      openDrawer: false,
      drawerData: null,

    };
  },
  methods: {
    handleMouseEnter(e) {
      this.showSiteContent = true;
      const brandId = e.target.getAttribute("name");
      getProductsByBrandID(brandId).then(({ data }) => {
        if (data.data && data.data.length > 16) {
          this.productsByBrand = data.data.slice(0, 16);
        } else {
          this.productsByBrand = data.data;
        }
      });
    },
    handleMouseLeave() {
      this.showSiteContent = false;
    },
    handleClickSmallCard(val) {
      // getProducts(id).then(({ data }) => {
      //   const val = data.data;
      //   this.$router.push({
      //     name: "Detail",
      //     params: {
      //       val,
      //     },
      //   });
      // });
      this.drawerData = val;
      this.openDrawer = true;
      this.$emit('drawInfo', val)
    },

    handleAddToCompare(ele) {
      const storeLength = this.$store.state.phones.length;
      if (storeLength > 3) {
        //提示不能再添加了
        this.$message({
          message: '对比数据已满！',
          type: 'warning',
        });
      } else {
        this.$message({
          message: '已添加进对比列表！',
          type: 'success',
        });
        this.$store.commit('addPhone', ele);
      }
    }
  },
  async mounted() {
    /* 请求品牌信息 */
    await getBrand().then(({ data }) => {
      this.brands = data.data;
    });
  },
};
</script>

<style lang='less' >
.site-banner {
  margin-top: 20px;
  width: 70%;
  display: flex;
  justify-content: start;

  ul {
    width: 15%;
    background-color: #fff;

    li {
      height: 40px;
      width: 100%;
      margin: 3px auto;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: gray;
      // border: 1px solid rgb(240, 240, 240);
      border-bottom: 1px solid rgb(244, 244, 244);
      background-color: #fff;
      cursor: pointer;
      box-shadow: 0 0em 0em rgb(0 0 0 / 10%);

      img {
        height: 80%;
        width: 100px;
        object-fit: contain;
      }

      i {
        margin: 0 15px 0 30px;
        font-size: 30px;
        color: rgb(92, 92, 92);
      }
    }

    li:hover {
      box-shadow: 0 0.5em 3em rgb(0 0 0 / 10%);
      transition: 0.3s;
    }
  }

  .site-content {
    width: 85%;
    height: 390px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(245, 245, 245);
    box-shadow: 0 8px 16px rgb(0 0 0 / 18%);

    .small-card {
      width: 22%;
      height: 70px;
      margin-right: 20px;
      float: left;
      margin-top: 15px;
      margin-left: 5px;
      display: flex;
      align-items: center;
      background-color: rgb(255, 255, 255);
      font-size: 14px;

      img {
        margin: 0 5px;
        height: 60px;
        width: 60px;
        object-fit: contain;
      }

      p {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    :hover {
      color: orangered;
      cursor: pointer;
    }
  }
}

.addButton {
  color: rgb(69, 125, 254);
  margin-left: 5px;
}
</style>